<template>
	<view class="container">
		<view class="test-section">
			<text class="section-title">输入框测试</text>
			
			<view class="input-group">
				<text class="label">文本输入：</text>
				<input class="test-input" type="text" v-model="testText" placeholder="请输入文本" @input="onTextInput" @focus="onFocus" @blur="onBlur" />
			</view>
			
			<view class="input-group">
				<text class="label">数字输入：</text>
				<input class="test-input" type="number" v-model="testNumber" placeholder="请输入数字" />
			</view>
			
			<view class="input-group">
				<text class="label">小数输入：</text>
				<input class="test-input" type="digit" v-model="testDecimal" placeholder="请输入小数" />
			</view>
			
			<view class="input-group">
				<text class="label">密码输入：</text>
				<input class="test-input" type="password" v-model="testPassword" placeholder="请输入密码" />
			</view>
			
			<view class="input-group">
				<text class="label">多行文本：</text>
				<textarea class="test-textarea" v-model="testTextarea" placeholder="请输入多行文本" />
			</view>
			
			<view class="input-group">
				<text class="label">选择器：</text>
				<picker class="test-picker" :value="pickerIndex" :range="pickerOptions" @change="onPickerChange">
					<view class="picker-text">{{ pickerOptions[pickerIndex] }}</view>
				</picker>
			</view>
		</view>
		
		<view class="result-section">
			<text class="section-title">输入结果</text>
			<view class="result-item">
				<text class="result-label">文本：</text>
				<text class="result-value">{{ testText || '未输入' }}</text>
			</view>
			<view class="result-item">
				<text class="result-label">数字：</text>
				<text class="result-value">{{ testNumber || '未输入' }}</text>
			</view>
			<view class="result-item">
				<text class="result-label">小数：</text>
				<text class="result-value">{{ testDecimal || '未输入' }}</text>
			</view>
			<view class="result-item">
				<text class="result-label">密码：</text>
				<text class="result-value">{{ testPassword ? '***' + testPassword.slice(-2) : '未输入' }}</text>
			</view>
			<view class="result-item">
				<text class="result-label">多行文本：</text>
				<text class="result-value">{{ testTextarea || '未输入' }}</text>
			</view>
			<view class="result-item">
				<text class="result-label">选择器：</text>
				<text class="result-value">{{ pickerOptions[pickerIndex] }}</text>
			</view>
		</view>
		
		<view class="debug-section">
			<text class="section-title">调试信息</text>
			<view class="debug-item">
				<text class="debug-label">当前文本值：</text>
				<text class="debug-value">{{ testText || '空' }}</text>
			</view>
			<view class="debug-item">
				<text class="debug-label">文本长度：</text>
				<text class="debug-value">{{ testText.length }}</text>
			</view>
		</view>
		
		<button class="test-btn" @click="clearAll">清空所有</button>
	</view>
</template>

<script>
import inputMixin from '@/utils/input-mixin.js'

export default {
	mixins: [inputMixin],
	data() {
		return {
			testText: '',
			testNumber: '',
			testDecimal: '',
			testPassword: '',
			testTextarea: '',
			pickerIndex: 0,
			pickerOptions: ['选项1', '选项2', '选项3', '选项4']
		}
	},
	methods: {
		onPickerChange(e) {
			this.pickerIndex = e.detail.value
		},
		onTextInput(e) {
			console.log('输入事件:', e.detail.value)
		},
		onFocus(e) {
			console.log('聚焦事件')
		},
		onBlur(e) {
			console.log('失焦事件')
		},
		clearAll() {
			this.testText = ''
			this.testNumber = ''
			this.testDecimal = ''
			this.testPassword = ''
			this.testTextarea = ''
			this.pickerIndex = 0
		}
	}
}
</script>

<style scoped>
.container {
	padding: 40rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.test-section, .result-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: block;
}

.input-group {
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
	display: block;
}

.test-input, .test-textarea, .test-picker {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	font-size: 28rpx;
	background-color: #fff !important;
	color: #333 !important;
	line-height: 1.4;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	user-select: text !important;
	-webkit-user-select: text !important;
	-webkit-touch-callout: default;
	-webkit-tap-highlight-color: transparent;
	caret-color: #667eea;
	z-index: 1;
	position: relative;
	height: auto;
	min-height: 68rpx;
	vertical-align: middle;
}

.test-textarea {
	min-height: 120rpx;
	resize: none;
	vertical-align: top;
}

.picker-text {
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	background-color: #fff;
}

.result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.result-item:last-child {
	border-bottom: none;
}

.result-label {
	font-size: 28rpx;
	color: #666;
}

.result-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.debug-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.debug-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.debug-item:last-child {
	border-bottom: none;
}

.debug-label {
	font-size: 28rpx;
	color: #666;
}

.debug-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.test-btn {
	width: 100%;
	padding: 30rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}
</style>
